<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="./js/extend.js"></script>
	<link rel="stylesheet" href="./css/inc.css" />
	<title>表单-含验证</title>
</head>
<body>
	<div class="w800 auto">
		<div class="Menu">
			<a href="index.html"><i class="icon-home gray mr5"></i>首页</a>
			<a href="layer.html"><i class="icon-th gray mr5"></i>布局</a>
			<a href="table.html"><i class="icon-table gray mr5"></i>表格</a>
			<a href="form.html"><i class="icon-building gray mr5"></i>表单</a>
			<a href="button.html"><i class="icon-coffee gray mr5"></i>色彩</a>
			<a href="ico.html"><i class="icon-leaf gray mr5"></i>图标</a>
			<a href="js.html"><i class="icon-legal gray mr5"></i>js插件</a>
		</div>
	</div>
	<div class="container w800 auto mt10">
		<div class="row ">
			<div class="span6">
				<form action="" class="form fm" id="form1" mdthod="post">
					<table class="table gray">
						<tr>
							<th colspan="2">普通样式</th>
						</tr>
						<tr>
							<td class="stitle">标题</td>
							<td><input type="text" name="title" />2-5字符</td>
						</tr>
						<tr>
							<td class="stitle">手机</td>
							<td><input type="text" name="tel" />(正则验证)</td>
						</tr>
						<tr>
							<td class="stitle">选择城市</td>
							<td >
								<select name="city" id="">
									<option value="">请选择城市..</option>
									<option value="1" disabled="disabled">北京</option>
									<option value="2">上海</option>
									<option value="3" disabled="1">天津</option>
									<option value="4">徐州</option>
									<option value="5">南京</option>
									<option value="6">榆林</option>
								</select>必填
							</td>
						</tr>
						<tr>
							<td class="stitle">性别</td>
							<td>
								<label for="s1" class="mr10">
									<input type="radio" id="s1" name="sex" /> 男
								</label>
								<label for="s2" class="">
									<input type="radio" id="s2" name="sex" /> 女
								</label>
							</td>
						</tr>
						<tr>
							<td class="stitle">爱好</td>
							<td>
								<label for="e1" class="mr10"><input type="checkbox" id="e1" name="enjoy" /> 唱歌</label>
								<label for="e2" class="mr10"><input type="checkbox" id="e2" name="enjoy" /> 喝酒</label>
								<label for="e3" class="mr10"><input type="checkbox" id="e3" name="enjoy" /> 写代码</label>
								<label for="e4" class="mr10"><input type="checkbox" id="e4" name="enjoy" /> 睡觉</label>
							</td>
						</tr>
						<tr>
							<td colspan="2" class="tc">
								<fieldset class="w100 of">
									<legend>选择合适的图片</legend>
									<input class="bgwhite" type="file" />
								</fieldset>
							</td>
						</tr>
						<tr>
							<td class="stitle">自我介绍</td>
							<td><textarea name="intro" id="" cols="20" rows="4" class="pct50"></textarea>不能超过10个字符</td>
						</tr>
						<tr>
							<td class="tc fm" colspan="2"><input type="submit" /></td>
						</tr>
					</table>
				</form>
			</div>
			<div class="span6 bde p5">
				<form action="" class="form fm" id="form2" mdthod="post">
					<div class="p5 tc bdb2 bdgray">自定义样式</div>
					<div class="p10">
						<p class="dib mr5 vm pct20 tr pr5">标题</p>
						<p class="dib"><input type="text"  name="title" /></p>
					</div>
					<div class="p10">
						<p class="dib mr5 vm pct20 tr pr5">手机</p>
						<p class="dib"><input type="text" name="tel" />(正则验证)</p>
					</div>
					<div class="p10">
						<p class="dib mr5 vm pct20 tr pr5">选择城市</p>
						<p class="dib">
							<select name="city" id="" class="selected">
								<option value="">请选择城市..</option>
								<option value="1" disabled="disabled">北京</option>
								<option value="2">上海</option>
								<option value="3" disabled="1">天津</option>
								<option value="4" >徐州</option>
								<option value="5">南京</option>
							</select>
						</p>
					</div>
					<div class="p10">
						<p class="dib mr5 vm pct20 tr pr5">性别</p>
						<p class="dib ">
							<label for="ss1" class="mr10">
								<input type="radio" id="ss1" name="sex" /> 男
							</label>
							<label for="ss2" class="">
								<input type="radio" id="ss2" name="sex" /> 女
							</label>
						</p>
					</div>
					<div class="p10">
						<p class="dib mr5 vm pct20 tr pr5">爱好</p>
						<p class="dib vm">
							<label for="ee1" class="mr10"><input type="checkbox" id="ee1" name="enjoy" /> 唱歌</label>
							<label for="ee2" class="mr10"><input type="checkbox" id="ee2" name="enjoy" /> 喝酒</label>
							<label for="ee3" class="mr10"><input type="checkbox" id="ee3" name="enjoy" /> 写代码</label>
							<label for="ee4" class="mr10"><input type="checkbox" id="e4e" name="enjoy" /> 睡觉</label>
						</p>
					</div>
					<div class="p10">
						<div class="dib tc">
							<fieldset>
								<legend>选择合适的图片</legend>
								<input class="bgwhite" type="file" />					
							</fieldset>
						</div>
					</div>
					<div class="p10">
						<div class="dib mr5 vm pct20 tr pr5">自我介绍</div>
						<div class="dib"><textarea name="intro" id="" cols="20" rows="3" class="pct100"></textarea></div>
					</div>
					<div class="p10">
						<p class="tc"><input type="submit"  class=" btn bgblack" /></p>
					</div>
				</form>
			</div>
		</div>
	</div>





<script type="text/javascript">
	$('#form1').validate({
		title:{len:'2,5'},
		intro:{maxlen:10},
		city:{nonull:1},
		tel:{regexp:/\d+/}
	
	})

	$('#form2').validate({
		title:{len:'2,5'},
		intro:{nonull:1}
		// tel:{tel:1}
	})
	
</script>












<div class="Fixed cp abs w30 bggray white p5 tc f12 fm fixed b10 r10 dn"><i class="icon-arrow-up icon-large mr10 f22"></i> 顶部</div>

</body>
</html>